<template>
  <div class="bills-box">
    <div class="bills-main">
      <div id="container"></div>
      <div class="fps-title"></div>
      <div class="bills-record" v-if="recordType && !isShareMode">
        <marquee scrollamount="4">
          <span class="marquee-box" v-for="item in slownessPrizesList">
            <span class="marquee-content">
              <span></span>
              {{item}}用户&nbsp;&nbsp;获取10元观影券×{{item}}
            </span>
            <span class="marquee-nbsp"></span>
          </span>
        </marquee>
        <!--<marquee scrollamount="5">-->
          <!--<span class="marquee-box" v-for="item in quickPrizesList">-->
            <!--<span class="marquee-content">-->
                <!--<span></span>-->
                <!--{{item.cityName}}用户&nbsp;&nbsp;获取{{item.prizeName}}-->
            <!--</span>-->
            <!--<span class="marquee-nbsp"></span>-->
          <!--</span>-->
        <!--</marquee>-->
        <!--<marquee scrollamount="3">-->
          <!--<span class="marquee-box" v-for="item in userPrizesList">-->
            <!--<span class="marquee-content">-->
                <!--<span></span>-->
                <!--{{item.cityName}}用户&nbsp;&nbsp;获取{{item.prizeName}}-->
            <!--</span>-->
            <!--<span class="marquee-nbsp"></span>-->
          <!--</span>-->
        <!--</marquee>-->
      </div>
      <div v-if="!isShareMode" class="pf-box">
        <img :class="{bomb:Unwrap}" :src="bombImg" alt="" @click="actionRecord">
        <img :class="{edit:Unwrap}" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/instructions.png" alt="" @click="actionIntructions">
        <img :class="{process:Unwrap}" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/process.png" alt="" @click="actionProcess">
        <img :class="{record:Unwrap}" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/record.png" alt="" @click="actionView">
        <img class="pf-img" @click="actionUnwrap" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/pf-img.png" alt="">
      </div>
      <div v-if="isShareMode" class="shared-bottom-area flex-middle-y">
        <div class="shared-button-area" @click="actionClickOpenApp">
          <img class="shared-button-back" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/shared-open-back.png" alt="">
          <img class="shared-button-title" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/shared-open-title.png" alt="">
          <img class="shared-button-subtitle" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/shared-open-subtitle.png" alt="">
        </div>
      </div>
      <div class="bills-animation" v-if="animationType">
        <img class="" :src="pufaImg" alt="">
      </div>
      <ul v-if="!isShareMode" class="bills-footer flex-middle-x layout-flex-justify-content_space-between">
        <li>
          <img :class="{footerActive:footerIndex === 0}" :src="xiaoImg" alt="">
        </li>
        <li>
          <img :class="{footerActive:footerIndex === 1}" :src="puImg" alt="">
        </li>
        <li class="active" @click="actionGift">
          <img :class="{footerActiveBox:footerIndex === 4}" :src="giftImg" alt="">
        </li>
        <li>
          <img :class="{footerActive:footerIndex === 2}" :src="guanImg" alt="">
        </li>
        <li>
          <img :class="{footerActive:footerIndex === 3}" :src="yingImg" alt="">
        </li>
      </ul>
      <div class="instruction">
        <div></div>
        <marquee scrollamount="4">
          <span>集齐英雄本色四个字开启10元观影券哦！</span>
        </marquee>
      </div>
      <div class="mask" v-if="maskType"></div>
      <div class="loading-bills" v-if="loadingType">
        <img class="loading-txt" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-txt.png" alt="">
        <img class="loading-img" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-img.png" alt="">
        <img class="loading-background"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-background.jpg" alt="">
      </div>
      <div class="alert" v-if="alertType">
        <div class="back"></div>
        <div class="backdrop">
          <img class="xpgy" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/xpgy.png" alt="">
          <div class="prizes-content">
            <img class="backdrop-img"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prizes-window.png"
                 alt="">
            <img class="prize-txt"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prize-txt.png"
                 alt="">
            <div>
              <img
                src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prizes-ten.png"
                   alt="">
              <span class="title">X <span>{{msgText}}</span></span>
            </div>
          </div>
          <img class="alert-button"
               src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
               @click="actionAlert"
          >
        </div>
      </div>
      <div class="instructions-box" v-if="instructionsShow">
        <div class="back"></div>
        <div class="backdrop">
          <img class="backdrop-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/activities-that-window.png"
               alt="">
          <img class="prompting-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/activities-that.png"
               alt="">
          <img
               class="instruction-close"
               @click="actionInstructionClose"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/instruction-close.png"
               alt="">
          <div class="instruction-txt">
            <p>
              01月18日11:00起，持卡人可抽兑《英雄本色》10元观影券每人限抽1次。
              活动总限量5000张，抽兑成功后，持卡人在14天有效期内选座购票并使用该券，
              可以10元价格购买《英雄本色》电影票一张，见<span>《使用说明》</span>详情见<span>《活动细则》</span>。
            </p>
          </div>
        </div>
      </div>
      <div class="record-box" v-if="recordShow">
        <div class="back"></div>
        <div class="backdrop">
          <img class="backdrop-img" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png" alt="">
          <img class="prompting-img" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/xpgy.png" alt="">
          <p class="prizes" v-if="!msgText">
            <img class="no-prize" src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/no-prize.png" alt="">
          </p>
          <div class="content-box" v-else>
            <div class="content">
              <div class="prizes-content">
                <div>
                  <img
                    src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prizes-ten.png"
                    alt="">
                  <span class="title">X <span>{{msgText}}</span></span>
                </div>
              </div>
            </div>
            <div class="content-to-view">
              <p>可进入“<span>我的-我的奖励</span>”查看使用奖品</p>
            </div>
          </div>
          <img class="alert-button"
               src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
               @click="actionViewAlert"
          >
        </div>
      </div>
    </div>
    <div class="prompt-box" v-if="showPrompt">
      <div class="back"></div>
      <div class="backdrop">
        <img class="backdrop-img" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png" alt="">
        <p class="prompting">提示</p>
        <p class="prizes">{{promptMessage}}</p>
        <img :class="{close:promptClose}" v-if="promptClose"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button-close.png" alt=""
             @click="actionPromptClose"
        >
        <img :class="promptClose?'determine':'alert-button'"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
             @click="actionPromptDetermine"
        >
      </div>
    </div>
    <div :class="layerClose?'process-layer':'process-layer-close'" v-if="processShow||layerClose">
      <img class="process-that"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/the-process-that.png"
           alt="">
      <img class="understand"
           @click="actionProcessClose"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/understand.png"
           alt="">
    </div>
  </div>
</template>
<script>
  import * as THREE from 'three';
//  import NetworkActivity from '@/network/NetworkActivity'
//  import ReturnManager from '@util/ReturnManager'
  import './js/DeviceOrientationControls.js'
  import './css/animate.css'
  import AnimateImpulse, {
    PULSE_FREQUENCY_COUNT,
    ENTER_FROM_POSITION,
    ENTER_TO_POSITION,
    ENTER_FROM_ORIENTATION,
    ENTER_TO_ORIENTATION,
    CHASE_START_ORIENTATION
  } from './js/AnimateImpulse.js'
  export default {
    name: '',
    data() {
      return {
        vrJudge:true,
        statusJudge:false,
        clickSwitch: true,
        loadingType: true,
        indexImg: 8,
        footerIndex: null,
        slownessPrizesList: [],
        maskType: false,
        recordShow: false,
        instructionsShow: false,
        processShow: false,
        layerClose: false,
        animationType: false,
        bombType: true,
        alertType: false,
        container: null,
        camera: null,
        scene: null,
        renderer: null,
        controls: null,
        INTERSECTED: null,
        raycaster: null,
        mouse: null,
        intersects: [],
        cubesUuid: [],
        square: null,
        squareList: [],
        squarePositionList: [],
        Unwrap: false,
        recordType: true,
        showPrompt:false,
        promptClose: false,
        promptMessage: '',
        pufa: {
          xiaoType: false,
          puType: false,
          giftType: false,
          guanType: false,
          yingType: false,
          xiaoIndexList: [],
          xiaoIndex: true,
          puIndexList: [],
          puIndex: true,
          guanIndexList: [],
          guanIndex: true,
          yingIndexList: [],
          yingIndex: true,
          pufaIndex: 0,
          pufaImg: ''
        },
        fov: 75,
        fps: {
          num: 0,
          fpsDate: 0,
          fpsOldTime: 0,
          fpsTitle: ''
        },
        position: {
          x: 0,
          y: 0
        },
        indexList: [
          0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 5, 6, 7, 8, 9,
          10, 11, 12, 13, 14, 15, 16,
          17, 18, 19, 20, 21, 22, 23, 24,
          25, 26, 27, 28, 29
        ],
        cpTexture: null,
        cpMaterial: null,
        cpGeometry: null,
        cpCubeMaterials: [],
        cubeMaterialTexture: [],
        animateImpulse: null,
        isFinishAnimate: false,
        isFinishLoadBackground: false,
        isCanStartAnimate: true,
        chaseScale: 0,
        chaseOrientation: null,
//        世玲接口需要的变量
        encryptCardNo: '',
        random: '',
        msgText: '',
        robPath: ''
      }
    },
    computed: {
      robType: function () {
        return this.$route.query.robType;
      },
      robId: function () {
        return this.$route.query.robId;
      },
      isShareMode() {
        return this.$route.query.mode === 'share';
      },
      bombImg() {
        if (!this.bombType) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/bombTrue.png';
        } else {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/bombFalse.png'
        }
      },
      xiaoImg: function () {
        return this.pufa.xiaoType ? 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/ying-active.png'
          : 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/ying.png'
      },
      puImg: function () {
        return this.pufa.puType ? 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/xiong-active.png'
          : 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/xiong.png'
      },
      giftImg: function () {
        return this.pufa.giftType ? 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/prize-active.png'
          : 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/prize.png'
      },
      guanImg: function () {
        return this.pufa.guanType ? 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/ben-active.png'
          : 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/ben.png'
      },
      yingImg: function () {
        return this.pufa.yingType ? 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/se-active.png'
          : 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/se.png'
      }
    },
    methods: {
      actionIntructions() {
        this.Unwrap = false;
        this.instructionsShow = true;
      },
      actionAlert() {
        this.alertType = false;
        this.footerIndex = null;
      },
      actionRecord() {
        this.recordType = !this.recordType;
        this.bombType = this.recordType;
        this.Unwrap = false;
      },
      actionProcess() {
        this.Unwrap = false;
        this.processShow = true;
        this.layerClose = true;
      },
      actionProcessClose() {
        this.layerClose = false;
        setTimeout(() => {
          this.processShow = false;
        }, 1000)
      },
      actionView() {
        this.Unwrap = false;
        this.recordShow = true;
      },
      actionViewAlert() {
        this.recordShow = false;
      },
      actionInstructionClose() {
        this.instructionsShow = false;
      },
      actionUnwrap() {
        this.Unwrap = !this.Unwrap;
      },
      actionPromptClose() {
        this.showPrompt = false;
        this.promptClose = false;
      },
      leftClickCallback() {
        if (this.pufa.xiaoType || this.pufa.puType || this.pufa.guanType || this.pufa.yingType){
          this.promptClose = true;
          this.showPrompt = true;
          this.promptMessage = '退出卡片将重置哦';
        } else {
          this.promptClose = false;
          this.$router.push({name: 'Discovery'});
        }
      },
      actionPromptDetermine() {
        this.showPrompt = false;
        if (this.promptClose){
          this.promptClose = false;
          this.$router.push({name: 'Discovery'});
        }
      },
      actionClickSwitchScene() {
        if (this.clickSwitch) {
          this.loadingType = true;
          this.clickSwitch = false;
          this.pufa.xiaoIndexList = [];
          this.pufa.puIndexList = [];
          this.pufa.guanIndexList = [];
          this.pufa.yingIndexList = [];
          this.indexImg = Math.floor(this.randomMethods(0, 14));
          setTimeout(() => {
            this.cpTexture.dispose();
            this.cpMaterial.dispose();
            this.cpGeometry.dispose();
            this.scene.remove(this.cpMesh);
            this.initMethods();
          }, 500)
          setTimeout(() => {
            this.clickSwitch = true;
          }, 10000)
        } else {
          this.showPrompt = true;
          this.promptMessage = '请间隔30秒重试'
        }
      },
      actionClickOpenApp() {
//        ReturnManager.universalLinksToApp();
      },
      actionGift() {
//        临时测试
        this.vrJudge = true;
        if (this.vrJudge){
          if (this.pufa.giftType) {
            this.actionRobPath('英雄本色');
          } else {
            this.showPrompt = true;
            this.promptMessage = '  请集齐： 英雄本色， 再来兑换!'
          }
        } else {
          this.showPrompt = true;
          this.promptMessage = '您已经抽过奖';
        }
      },
      actionFov(type) {
        this.camera.fov = type;
        this.camera.updateProjectionMatrix();
        this.renderer.render(this.scene, this.camera);
      },
      getScene() {
        this.container = document.getElementById('container');
        this.camera = new THREE.PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 1, 1100);
        this.controls = new THREE.DeviceOrientationControls(this.camera);
        this.scene = new THREE.Scene();
        let geometry = new THREE.SphereBufferGeometry(500, 60, 40);
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(-1, 1, 1);
        let texture = new THREE.TextureLoader().load('https://static.idoupiao.com/pdsImg/i-pufa-third-active/yingxiongbense-v1.0.jpg', () => {
          setTimeout(() => {
            this.loadingType = false;
            this.isFinishLoadBackground = true;
          }, 1000)
        });
        let material = new THREE.MeshBasicMaterial({
          map: texture
        });
        let mesh = new THREE.Mesh(geometry, material);
        this.cpGeometry = geometry;
        this.cpMaterial = material;
        this.cpTexture = texture;
        this.cpMesh = mesh;
        this.scene.add(mesh);
      },
      getPrizes() {
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.container.appendChild(this.renderer.domElement);
        window.addEventListener('resize', this.onWindowResize, false);
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        document.querySelector('#container').addEventListener('click', this.onDocumentMouseMove, false);
      },
      initMethods() {
        this.getScene();
        if (!this.isShareMode) {
          this.cpCubeMaterials.forEach(data => {
            data.geometry.dispose();
            data.cubeMaterialArray.forEach(material => {
              material.dispose()
            });
          })
          this.cubeMaterialTexture.forEach(texture => {
            texture.dispose();
          })
          this.squareList.forEach(square => {
            this.scene.remove(square);
          })
          this.squareList = [];
          this.creatCube();
        }
      },
      creatCube() {
        /* eslint-disable */
        this.cpCubeMaterials = []
        this.cubeMaterialTexture = [];
        let texture1 = new THREE.TextureLoader().load('https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-false.png');
        this.cubeMaterialTexture.push(texture1);
        for (let i = 0; i < 42; i++) {
          let indexImg = i;
          let texture2 = new THREE.TextureLoader().load('https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-activity' + this.indexList[indexImg] + '.png');
          this.cubeMaterialTexture.push(texture2);
//            大小及形状
          let geometry = new THREE.CubeGeometry(0.2, 10, 5);
          let cubeMaterialArray = [];

          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture1,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture2,
            transparent: true
          }));
          /* eslint-enable */
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            transparent: true
          }));
          this.square = new THREE.Mesh(geometry, cubeMaterialArray);
          this.cpCubeMaterials.push({
            geometry,
            cubeMaterialArray
          });
          let r = this.randomMethods(30, 110);
          let s = this.randomMethods(0, Math.PI);
          let c = this.randomMethods(0, 2 * Math.PI);
          this.square.position.x = r * Math.sin(s) * Math.cos(c);
          this.square.position.y = r * Math.sin(s) * Math.sin(c);
          this.square.position.z = r * Math.cos(s);
          this.scene.add(this.square);
//          获取小浦观影的uuid
          if (this.indexList[indexImg] === 0) {
            this.pufa.xiaoIndexList.push(this.square.uuid);
          } else if (this.indexList[indexImg] === 1) {
            this.pufa.puIndexList.push(this.square.uuid);
          } else if (this.indexList[indexImg] === 2) {
            this.pufa.guanIndexList.push(this.square.uuid);
          } else if (this.indexList[indexImg] === 3) {
            this.pufa.yingIndexList.push(this.square.uuid);
          }
          this.cubesUuid[i] = this.square.uuid;
          this.squareList[i] = this.square;
          this.squareList[i].rotation.y += this.randomMethods(0, 10);
          this.squarePositionList[i] = {...this.squareList[i].position}
        }
      },
      randomMethods(n, m) {
        return Math.random() * (m - n) + n
      },
      onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
      },
      onDeviceShake() {
        this.actionClickSwitchScene();
      },
      onDocumentMouseMove(event) {
        this.actionStatus(3);
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//        临时测试
        this.statusJudge = true;
        setTimeout(() => {
          if (this.statusJudge){
            this.judgeClickPrize();
          }
        }, 200)
        event.preventDefault();
      },
      judgeClickPrize() {
        this.intersects = this.raycaster.intersectObjects(this.scene.children);
        if (this.intersects.length > 0) {
          if (this.INTERSECTED !== this.intersects[0].object) {
            for (let i = 0; i < this.cubesUuid.length; i++) {
              if (this.cubesUuid[i] === this.intersects[0].object.uuid) {
                this.cubesUuid[i] = '';
                if (this.INTERSECTED) {
                  this.INTERSECTED.material[0].color.setHex(this.INTERSECTED.currentHex);
                }
                this.INTERSECTED = this.intersects[0].object;
                this.INTERSECTED.currentHex = this.INTERSECTED.material[0].color.getHex();
                for (let i = 0; i < this.INTERSECTED.material.length; i++) {
                  this.INTERSECTED.material[i].visible = false;
                }
                this.lookUp(this.intersects[0].object.uuid);
              }
            }
          }
        } else {
          if (this.INTERSECTED) this.INTERSECTED.material[0].color.set(this.INTERSECTED.currentHex);
          this.INTERSECTED = null;
        }
      },
      animationMethods() {
        for (let i = 0; i < this.squareList.length; i++) {
          this.squareList[i].rotation.y += 0.06 % 10;
          this.position.x += Math.random() * 1.5;
          this.squareList[i].position.y = this.squarePositionList[i].y + 4 * Math.sin(this.position.x * 0.0012);
        }
      },
      standardizationDeg(orientation) {
        return {
          x: (orientation.x + 360 * 100) % 360,
          y: (orientation.y + 360 * 100) % 360,
          z: (orientation.z + 360 * 100) % 360
        }
      },
      render() {
        this.getFps();
        window.requestAnimationFrame(this.render);
        this.animationMethods();
        if (!this.isFinishAnimate) {
          if (this.isFinishLoadBackground) {
            if (this.isCanStartAnimate) {
              this.animateImpulse.update();
            } else {
              this.controls.cpUpdate({position: ENTER_FROM_POSITION, orientation: ENTER_FROM_ORIENTATION});
            }
          }
        } else if (this.isChasing) {
          this.chaseScale += 0.05;
          let curOrientation = this.standardizationDeg(this.controls.getDeviceOrientationDeg());
          let startChaseOrientation = this.standardizationDeg(CHASE_START_ORIENTATION);
          this.chaseOrientation = {
            x: startChaseOrientation.x + (curOrientation.x - startChaseOrientation.x) * this.chaseScale,
            y: startChaseOrientation.y + (curOrientation.y - startChaseOrientation.y) * this.chaseScale,
            z: startChaseOrientation.z + (curOrientation.z - startChaseOrientation.z) * this.chaseScale
          }
          this.controls.cpUpdate({orientation: this.chaseOrientation});
          curOrientation = null;
          startChaseOrientation = null;
          if (this.chaseScale > 1) {
            this.isChasing = false;
          }
        } else {
          this.controls.cpUpdate();
        }
        this.raycaster.setFromCamera(this.mouse, this.camera);
        this.renderer.render(this.scene, this.camera);
      },
      lookUp(type) {
        if (this.pufa.xiaoIndex) {
          for (let i = 0; i < this.pufa.xiaoIndexList.length; i++) {
            if (this.pufa.xiaoIndexList[i] === type) {
              this.pufaIndex = 0;
              this.setTime(this.pufaIndex);
            }
          }
        }
        if (this.pufa.puIndex) {
          for (let i = 0; i < this.pufa.puIndexList.length; i++) {
            if (this.pufa.puIndexList[i] === type) {
              this.pufaIndex = 1;
              this.setTime(this.pufaIndex);
            }
          }
        }
        if (this.pufa.guanIndex) {
          for (let i = 0; i < this.pufa.guanIndexList.length; i++) {
            if (this.pufa.guanIndexList[i] === type) {
              this.pufaIndex = 2;
              this.setTime(this.pufaIndex);
            }
          }
        }
        if (this.pufa.yingIndex) {
          for (let i = 0; i < this.pufa.yingIndexList.length; i++) {
            if (this.pufa.yingIndexList[i] === type) {
              this.pufaIndex = 3;
              this.setTime(this.pufaIndex);
            }
          }
        }
      },
      setTime(index) {
        this.animationType = true;
        if (this.pufaIndex === 0) {
          this.pufaImg = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-activity0.png'
        } else if (this.pufaIndex === 1) {
          this.pufaImg = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-activity1.png'
        } else if (this.pufaIndex === 2) {
          this.pufaImg = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-activity2.png'
        } else if (this.pufaIndex === 3) {
          this.pufaImg = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/index-activity3.png'
        }
        setTimeout(() => {
          if (this.animationType) {
            document.querySelector('.bills-animation').style.opacity = 1;
            this.maskType = true;
            if (index === 0) {
              this.pufa.xiaoIndex = false;
              document.querySelector('.bills-animation').className = 'bills-animation bills-active-xiao';
            } else if (index === 1) {
              this.pufa.puIndex = false;
              document.querySelector('.bills-animation').className = 'bills-animation bills-active-pu';
            } else if (index === 2) {
              this.pufa.guanIndex = false;
              document.querySelector('.bills-animation').className = 'bills-animation bills-active-guan';
            } else if (index === 3) {
              this.pufa.yingIndex = false;
              document.querySelector('.bills-animation').className = 'bills-animation bills-active-ying';
            }
          }
        }, 100);
        setTimeout(() => {
          if (index === 0) {
            this.pufa.xiaoType = true;
          } else if (index === 1) {
            this.pufa.puType = true;
          } else if (index === 2) {
            this.pufa.guanType = true;
          } else if (index === 3) {
            this.pufa.yingType = true;
          }
          this.animationType = false;
          this.maskType = false;
          this.footerIndex = index;
          if (this.pufa.xiaoType && this.pufa.puType && this.pufa.guanType && this.pufa.yingType) {
            this.pufa.giftType = true;
            this.footerIndex = 4;
          }
        }, 2000)
      },
      getFps() {
        this.fps.num++;
        let newDates = new Date();
        let newTime = newDates.getTime();
        let times = newTime - this.fps.fpsOldTime;
        let fps = parseInt(1000 / times);
        if (this.fps.num % 20 === 0) {
          this.fps.fpsTitle.innerHTML = 'fps: ' + fps;
        }
        if (this.fps.num > 500) {
          this.fps.num = 0;
        }
        this.fps.fpsOldTime = newTime;
      },
      getGamplification() {
        var s = {
          tsa: 0,
          tsb: 0,
//        记录start时的倍数
          scale: 75,
//        move的时候的倍数
          moscale: 75
        }
        document.addEventListener('touchstart', function (e) {
//        把时时的倍数记录一下
          s.scale = s.moscale;
          e = e || window.event;
          if (e.touches.length === 2) {
//          获取2对坐标
            var stax = e.touches[0].clientX;
            var stay = e.touches[0].clientY;
            var stbx = e.touches[1].clientX;
            var stby = e.touches[1].clientY;
            s.tsa = Math.sqrt((stax - stbx) * (stax - stbx) + (stay - stby) * (stay - stby));
          }
        }, false)
        document.addEventListener('touchmove', (e) => {
          e = e || window.event;
          if (e.touches.length === 2) {
            var endax = e.touches[0].clientX;
            var enday = e.touches[0].clientY;
            var endbx = e.touches[1].clientX;
            var endby = e.touches[1].clientY;
            s.tsb = Math.sqrt((endax - endbx) * (endax - endbx) + (enday - endby) * (enday - endby));
//          实时的倍数等于我的变化比例cheng以start时记录的倍数
            if (Math.floor(s.tsa / s.tsb * s.scale) > 110) {
              s.moscale = 110;
            } else if (Math.floor(s.tsa / s.tsb * s.scale) < 30) {
              s.moscale = 30;
            } else {
              s.moscale = Math.floor(s.tsa / s.tsb * s.scale);
            }
            this.actionFov(s.moscale);
          }
        }, false)
      },
      getBill() {
//        NetworkActivity.winningRecord(this.robType, this.robId).then((data) => {
//          if (data.length){
//            this.slownessPrizesList.push(JSON.parse(data));
//          }
//        }, error => {
//          this.showPrompt = true;
//          this.promptMessage = error.message;
//        })
      },
      getStarted() {
//        fps测试使用
        this.fps.fpsTitle = document.querySelector('.fps-title');
        this.fps.fpsDate = new Date();
        this.fps.fpsOldTime = this.fps.fpsDate.getTime();
        this.getFps();
        this.actionStatus(1);
        if (!this.isShareMode) {
//        中奖名单
          this.getBill();
        }
//        生成场景和奖品
        this.initMethods();
        this.getPrizes();
        this.render();
        this.getGamplification();
      },
//      世玲接口
      actionStatus: function (type) {
//        NetworkActivity.filmRobStatus(this.robType, this.robId).then((ret) => {
//          this.closeLoading();
//          this.encryptCardNo = ret.encryptCardNo;
//          this.random = ret.random;
//          if (ret.status === 0) {
//            this.statusJudge = true;
//          } else if ((ret.status === 1 || ret.status === 2 || ret.status === 3)) {
//            this.vrJudge = false;
//            this.statusJudge = true;
//            if (type !== 3){
//              this.msgText = ret.status;
//              this.alertType = true;
//            }
//          } else if (ret.status === 4 && type !== 3) {
//            this.vrJudge = false;
//            this.statusJudge = true;
//            if (type !== 3){
//              this.showPrompt = true;
//              this.promptMessage = ret.prizeInfo;
//            }
//          } else {
//            this.statusJudge = false;
//            this.showPrompt = true;
//            this.promptMessage = ret.prizeInfo;
//          }
//        }, error => {
//          this.closeLoading();
//          this.showPrompt = true;
//          this.promptMessage = error.message;
//        })
      },
      actionRobPath: function (cardInfo) {
//        临时测试
          this.pufa.xiaoIndex = true;
          this.pufa.puIndex = true;
          this.pufa.guanIndex = true;
          this.pufa.yingIndex = true;
          this.pufa.xiaoType = false;
          this.pufa.puType = false;
          this.pufa.guanType = false;
          this.pufa.yingType = false;
          this.pufa.giftType = false;
          this.footerIndex = null;
          window.alert('恭喜您完成了');
//        this.showLoading();
//        NetworkActivity.filmRobPath(this.robType, this.robId).then((ret) => {
//          this.pufa.xiaoIndex = true;
//          this.pufa.puIndex = true;
//          this.pufa.guanIndex = true;
//          this.pufa.yingIndex = true;
//          this.pufa.xiaoType = false;
//          this.pufa.puType = false;
//          this.pufa.guanType = false;
//          this.pufa.yingType = false;
//          this.pufa.giftType = false;
//          this.footerIndex = null;
//          this.robPath = ret.robPath;
//          this.actionRob(cardInfo);
//        }, error => {
//          this.closeLoading();
//          this.showPrompt = true;
//          this.promptMessage = error.message;
//        })
      },
      actionRob: function (cardInfo) {
//        NetworkActivity.filmRobAction(this.robPath + '/' + this.random, this.robType, this.robId, cardInfo).then((ret) => {
//          setTimeout(() => {
//            this.actionStatus(2);
//          }, 4000)
//        }, error => {
//          this.closeLoading();
//          this.showPrompt = true;
//          this.promptMessage = error.message;
//        })
      }
    },
      mounted: function () {
        this.animateImpulse = new AnimateImpulse([ENTER_FROM_POSITION, ENTER_FROM_ORIENTATION],
          [ENTER_TO_POSITION, ENTER_TO_ORIENTATION], PULSE_FREQUENCY_COUNT, (data) => {
            this.controls.cpUpdate({position: data[0], orientation: data[1]});
          }, () => {
            console.log('完成');
            this.isFinishAnimate = true;
            this.isChasing = true;
          });
        document.querySelector('.bills-box').style.height = window.innerHeight + 'px';
        this.getStarted();
      }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .bills-box {
    width: 7.5rem;
    height: 100%;
    min-height: 12.2rem;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
  }

  .bills-main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
  }

  .loading-bills {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .loading-txt {
      width: 1.3rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 3;
    }
    @keyframes billsImg {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-img {
      width: 2.5rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: billsImg 0.5s infinite;
      animation-timing-function: linear;
      -webkit-animation: billsImg 0.5s infinite; /* Safari 和 Chrome */
      -webkit-animation-timing-function: linear;
    }
    .loading-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }

  .fps-title{
  width:1rem;
  height:1rem;
  color:#fff;
  text-align: center;
  line-height:1rem;
  border-radius:50%;
  position: fixed;
  right:0;top:1rem;
  pointer-events: none;
  }
  .bills-record {
    width: 100%;
    height: 4rem;
    color: #fff;
    text-align: center;
    position: fixed;
    right: 0;
    top: 1.8rem;
    pointer-events: none;
    marquee {
      height: 1rem;
      line-height: 1rem;
      .marquee-box {
        .marquee-content {
          padding: 0.1rem;
          border: 1px solid #fff;
          border-radius: 50px;
          font-size: 0.22rem;
          position: relative;
          top: 0;
          left: 0;
          margin-right: 7rem;
          span {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.2;
            border-radius: 50px;
            border: 1px solid #000;
          }
        }
        .marquee-nbsp {
          width: 2rem;
        }
      }
    }
  }

  .pf-box {
    width: 2rem;
    height: 4rem;
    position: fixed;
    right: -3rem;
    top: 5rem;
    background: #fff;
    img {
      width: 1.36rem;
      position: absolute;
      transition: 1.2s all;
      top: 1.3rem;
      left: 2.5rem;
      opacity: 0;
    }
    .bomb {
      top: -0.3rem;
      left: -2.5rem;
      opacity: 1;
    }
    .edit {
      top: 0.5rem;
      left: -3.6rem;
      opacity: 1;
    }
    .process {
      top: 2.1rem;
      left: -3.6rem;
      opacity: 1;
    }
    .record {
      top: 3.3rem;
      left: -2.5rem;
      opacity: 1;
    }
    .round {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
    }
    .pf-img {
      width: 0.93rem;
      position: absolute;
      top: 1.2rem;
      left: -1.9rem;
      opacity: 1;
    }
  }

  .switch-scene {
    width: 2.5rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    border-radius: 50%;
    position: fixed;
    left: 50%;
    bottom: 0.5rem;
    transform: translate(-50%, -50%);
  }

  .shared-bottom-area {
    width: 100%;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    border-radius: 50%;
    position: fixed;
    left: 0;
    bottom: 0.2rem;
    .shared-button-area {
      position: relative;
      margin-bottom: 0.4rem;
      width: 2.5rem;
      height: 2.5rem;

      @keyframes sharedBackImg {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .shared-button-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 2.5rem;
        z-index: 1;
        animation: sharedBackImg 0.5s infinite;
        animation-timing-function: linear;
        -webkit-animation: sharedBackImg 0.5s infinite; /* Safari 和 Chrome */
        -webkit-animation-timing-function: linear;
      }
      .shared-button-title {
        position: absolute;
        margin-bottom: 0.4rem;
        width: 1rem;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .shared-button-subtitle {
        position: absolute;
        top: 0;
        width: 2rem;
        z-index: 3;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }
  }

  .bills-animation {
    width: 1.5rem;
    height: 3rem;
    position: absolute;
    top: 5rem;
    left: 3rem;
    transition: 2s all;
    opacity: 1;
    animation: fadeInDown 2s 1 linear 0s;
    img {
      width: 100%;
    }
  }

  .bills-active-xiao {
    width: 0.7rem;
    height: 2rem;
    position: absolute;
    top: 10.6rem;
    left: 0.3rem;
    opacity: 0;
    img {
      width: 100%;
    }
  }

  .bills-active-pu {
    width: 0.7rem;
    height: 2rem;
    position: absolute;
    top: 10.6rem;
    left: 1.7rem;
    opacity: 0;
    img {
      width: 100%;
    }
  }

  .bills-active-guan {
    width: 0.7rem;
    height: 2rem;
    position: absolute;
    top: 10.6rem;
    left: 5.15rem;
    opacity: 0;
    img {
      width: 100%;
    }
  }

  .bills-active-ying {
    width: 0.7rem;
    height: 2rem;
    position: absolute;
    top: 10.6rem;
    left: 6.4rem;
    opacity: 0;
    img {
      width: 100%;
    }
  }

  .bills-footer {
    width: 100%;
    height: 1.3rem;
    position: fixed;
    left: 0;
    bottom: 0.6rem;
    padding: 0 0.2rem;
    li {
      img {
        width: 1rem;
      }
      .footerActive {
        animation: tada 1.5s 1 linear 0s;
      }
      .footerActiveBox {
        animation: flash 1s infinite linear 0s;
      }
    }
    .active {
      width: 2rem;
      img {
        width: 2rem;
      }
    }
  }

  .instruction {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 0.3rem;
    div {
      width: 100%;
      height: 0.8rem;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(#000000, transparent);
      opacity: 0.2;
    }
  }

  #container {
    width: 100%;
    height: 100%;
  }

  .service img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 50px;
    height: 50px;
  }

  .alert {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: fadeInDown 1s 1 linear 0s;
      .xpgy{
        width:3rem;
        position: absolute;
        top:0.5rem;left:50%;
        transform: translate(-50%, 0);
      }
      .prizes-content{
        .backdrop-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .prize-txt {
          width:2rem;
          position: absolute;
          top:1.5rem;left:50%;
          transform: translate(-50%, 0);
        }
        div {
          width:3rem;
          position: relative;
          top:2.7rem;left:50%;
          transform: translate(-50%, 0);
          white-space:nowrap;
          img{
            width:2rem;
          }
          .title{
            position: relative;
            top:-0.5rem;
            font-size:0.6rem;
            text-shadow: 0px 0px 10px blue;
            color:#fff;
            span{
              font-size:1rem;
              position: relative;
              top:0.1rem;
            }
          }
        }
      }
      .alert-button {
        width: 50%;
        position: absolute;
        top: 4.7rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }

  .prompt-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation:mymove 1s 1;
      -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
      .backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 10px blue;
        font-size: 0.5rem;
        padding-top: 0.5rem;
      }
      .prizes {
        width: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 10px blue;
        font-size: 0.3rem;
        position: absolute;
        top: 1.5rem;
        left: 0;
        padding:0.2rem;
      }
      /*.sub-promt-message{*/
        /*width: 100%;*/
        /*position: absolute;*/
        /*top: 2.3rem;*/
        /*left: 0;*/
        /*padding:0.2rem 1.2rem;*/
        /*.sub-promt-message-container{*/
          /*text-align: center;*/
          /*text-shadow: 0px 0px 10px blue;*/
          /*background: rgba(0, 0, 0, 0.5);*/
          /*border: #afafaf 0.5px solid;*/
          /*color: #ffe327;*/
          /*font-size: 0.2rem;*/
          /*padding:0.1rem 0rem;*/
        /*}*/
      /*}*/
      .close {
        width: 40%;
        position: absolute;
        left: -2.5rem;
        right: 0;
        top: 4rem;
        bottom: 0;
        margin: auto;
      }
      .determine {
        width: 40%;
        position: absolute;
        left: 2.5rem;
        right: 0;
        top: 4rem;
        bottom: 0;
        margin: auto;
      }
      .alert-button {
        width: 50%;
        position: absolute;
        top: 4.7rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  .instructions-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .backdrop {
      width: 4.8rem;
      height: 5.4rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: fadeInDown 1s 1 linear 0s;
      .backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompting-img{
        width: 2.8rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
      }
      .instruction-close{
        width:0.45rem;
        position: absolute;
        top:-0.2rem;right:-0.2rem;
      }
      .instruction-txt{
        width:4rem;
        line-height:0.5rem;
        position: absolute;
        top:1.2rem;
        left:50%;
        transform: translate(-50%, 0);
        color:#fff;
        font-size:0.24rem;
        span{
          color:#ffdd22;
        }
      }
    }
  }
  .record-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: fadeInDown 1s 1 linear 0s;
      .backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompting-img{
        width: 2.8rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
      }
      .prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 10px blue;
        font-size: 0.38rem;
        padding-top: 0.5rem;
      }
      .prizes {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 1.8rem;
        left: 0;
        .no-prize{
          width:2.4rem;
        }
      }
      .content-box{
        .content {
          width:90%;
          height: 2.4rem;
          position: relative;
          top: 1.3rem;
          left: 50%;
          transform: translate(-50%, 0);
          text-align: center;
          font-size: 0.24rem;
          overflow: auto;
          .backdrop-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
          }
          .prizes-content{
            div {
              width:3rem;
              position: relative;
              top:0.5rem;left:50%;
              transform: translate(-50%, 0);
              white-space:nowrap;
              img{
                width:2rem;
              }
              .title{
                position: relative;
                top:-0.5rem;
                font-size:0.6rem;
                text-shadow: 0px 0px 10px blue;
                color:#fff;
                span{
                  font-size:1rem;
                  position: relative;
                  top:0.1rem;
                }
              }
            }
          }
        }
        .content-to-view{
          width:95%;
          position: relative;
          top: 1.2rem;
          left: 50%;
          transform: translate(-50%, 0);
          text-align: center;
          font-size: 0.24rem;
          overflow: auto;
          z-index:1;
          p{
            color: #fff;
            span{
              color: #ffd304;
            }
          }
        }
      }
      .alert-button {
        width: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 4rem;
        bottom: 0;
        margin: auto;
      }
    }
  }

  .shake-message {
    position: absolute;
    top: 9rem;
    left: 0;
    width: 0.95rem;
    height: 0.65rem;
    z-index: 4;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    div {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #000;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      border-top: 1px solid #9d97a4;
      border-bottom: 1px solid #9d97a4;
      border-right: 1px solid #9d97a4;
      box-shadow: 0px 0px 10px blue;
      opacity: 0.5;
      z-index: 1;
    }
    .shake-message-image {
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      margin-left: 0.1rem;
      width: 0.6rem;
      animation: swing 1s infinite linear 3s;
    }
  }
  @keyframes mymove
  {
    from {transform: scale(0)}
    to {transform: scale(1)}
  }

  @-webkit-keyframes mymove /*Safari and Chrome*/
  {
    from {transform: scale(0)}
    to {transform: scale(1)}
  }
  .process-layer{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    animation:mymove 1s 1;
    -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
    .process-that{
      width:100%;
      height:100%;
      position: absolute;
      top:0;left:0;
    }
    .understand{
      width:3.2rem;
      position: absolute;
      bottom:0.8rem;
      left:50%;
      transform: translate(-50%, 0);
    }
  }
  @keyframes mymove-close
  {
    from {transform: scale(1)}
    to {transform: scale(0)}
  }

  @-webkit-keyframes mymove-close /*Safari and Chrome*/
  {
    from {transform: scale(1)}
    to {transform: scale(0)}
  }
  .process-layer-close{
    width:100%;
    height:100%;
    position: fixed;
    top:0.7rem;left:0;
    animation:mymove-close 1s 1;
    -webkit-animation:mymove-close 1s 1; /*Safari and Chrome*/
    .process-that{
      width:100%;
      height:100%;
      position: absolute;
      top:0;left:0;
    }
    .understand{
      width:3.2rem;
      position: absolute;
      bottom:0.8rem;
      left:50%;
      transform: translate(-50%, 0);
    }
  }
</style>
